<template>
  <section class="webview fixHeight">
    <el-scrollbar style="height:100%">
      <el-form ref="form" :model="detail" label-width="100px" class="form">
        <el-form-item label="出售标题">
          <el-input v-model="detail.title" />
        </el-form-item>
		 <el-form-item label="开盘时间" >
          <el-input v-model="detail.openDate" />
        </el-form-item> 
		<el-form-item label="户室号" >
          <el-input v-model="detail.buildingNum" />
        </el-form-item>
		 <el-form-item label="楼层">
          <el-input v-model="detail.floorString" />
        </el-form-item> 
		<el-form-item label="总楼层">
          <el-input v-model="detail.totalFoor" />
        </el-form-item>
		 <el-form-item label="看房">
		<el-select v-model="detail.lookType" placeholder="看房">
			<el-option v-for="item in $store.state.user.typeList.filter(item=>item.typeSimplify == 'hou_look_type')" :key="item.id"
			 :label="item.title" :value="item.simplify" />
		</el-select>
		 </el-form-item> 
		 <el-form-item label="房屋年限">
		<el-select v-model="detail.housingAgeType" placeholder="看房">
			<el-option v-for="item in $store.state.user.typeList.filter(item=>item.typeSimplify == 'hou_age_type')" :key="item.id"
			 :label="item.title" :value="item.simplify" />
		</el-select>
		 </el-form-item> 
		 <el-form-item label="服务类型">
		<el-select v-model="detail.serviceType" placeholder="看房">
			<el-option v-for="item in $store.state.user.typeList.filter(item=>item.typeSimplify == 'hou_service_type')" :key="item.id"
			 :label="item.title" :value="item.simplify" />
		</el-select>
		 </el-form-item>
        <el-form-item label="房屋标签">
          <el-select v-model="detail.tagsType" multiple placeholder="请选择">
            <el-option
              v-for="item in tagsTypeOptions"
              :key="item.id"
              :label="item.title"
              :value="item.simplify"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="总价">
          <el-input v-model="detail.hopePrice" />
        </el-form-item>
		 <el-form-item label="产权年限">
          <el-input v-model="detail.propertyYears" />
        </el-form-item>
        <el-form-item label="面积">
          <el-input v-model="detail.inArea" />
        </el-form-item>
        <el-form-item label="业主心态">
          <el-input v-model="detail.ownerMentality" />
        </el-form-item>
        <el-form-item label="户型">
          <el-select v-model="detail.apartmentId" placeholder="请选择">
            <el-option
              v-for="item in apartmentIdOptions"
              :key="item.id"
              :label="item.typeName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <!--        <el-form-item label="户型类型">-->
        <!--          <el-select v-model="detail.apartmentType" placeholder="请选择">-->
        <!--            <el-option-->
        <!--              v-for="item in apartmentTypeOptions"-->
        <!--              :key="item.id"-->
        <!--              :label="item.title"-->
        <!--              :value="item.simplify"-->
        <!--            />-->
        <!--          </el-select>-->
        <!--        </el-form-item>-->
        <el-form-item label="是否新房">
          <el-select v-model="detail.newOrSecond" placeholder="请选择">
            <el-option
              v-for="item in newOrSecondOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="是否有电梯">
          <el-select v-model="detail.isElevator" placeholder="请选择">
            <el-option
              :value="true"
              label="有"
            />
            <el-option
              :value="false"
              label="没有"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="装修类型">
          <el-select v-model="detail.renovationType" placeholder="请选择">
            <el-option
              v-for="item in renovationTypeOptions"
              :key="item.id"
              :label="item.title"
              :value="item.simplify"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="房屋朝向">
          <el-input v-model="detail.houseOrientation" />
        </el-form-item>
        <el-form-item label="房屋类型">
          <el-select v-model="detail.houseType" placeholder="请选择">
            <el-option
              v-for="item in houseTypeOptions"
              :key="item.id"
              :label="item.title"
              :value="item.simplify"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="权属">
          <el-select v-model="detail.ownershipType" placeholder="请选择">
            <el-option
              v-for="item in ownershipTypeOptions"
              :key="item.id"
              :label="item.title"
              :value="item.simplify"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="单价">
          <el-input v-model="detail.unitPrice" />
        </el-form-item> 
		<el-form-item label="佣金比例">
          <el-input v-model="detail.commissionRate"  />
        </el-form-item>
        <el-form-item label="年代">
          <el-input v-model="detail.buildingYear" />
        </el-form-item>
        <el-form-item label="核心卖点">
          <el-input v-model="detail.corePoint" />
        </el-form-item>
        <el-form-item label="所在楼盘" v-if='detail.newOrSecond == 1'>
          <el-select v-model="detail.residentialId" placeholder="请选择">
            <el-option
              v-for="item in residentialIdOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
		<el-form-item label="所在小区" v-if='detail.newOrSecond == 2'>
		  <el-select v-model="detail.residentialId" placeholder="请选择">
		    <el-option
		      v-for="item in residentialListOptions"
		      :key="item.id"
		      :label="item.name"
		      :value="item.id"
		    />
		  </el-select>
		</el-form-item>
		<!-- <el-form-item v-if="$route.query.id" label="户型图片">
		  <div class="picList">
		    <div v-for="(item,index) in resourcesList.filter(item=>item.type =='hou_house_resources_apartment_pictures')" class="item">
		      <img class="pic" :src="item.pictureUrl" alt>
		      <i class="el-icon-delete delIcon hand" @click="handleRemove(item,index)" />
		    </div>
		  </div>
		</el-form-item> -->
		<el-form-item v-if="$route.query.id" label="展示图片">
		  <div class="picList">
		    <div v-for="(item,index) in resourcesList.filter(item=>item.type == 'hou_house_resources_show_pictures')" class="item">
		      <img class="pic" :src="item.pictureUrl" alt>
		      <!-- <i class="el-icon-delete delIcon hand" @click="handleRemove(item,index)" /> -->
		    </div>
			<div v-for="(item,index) in resourcesList.filter(item=>item.type == 'hou_house_resources_indoor_picture')" class="item">
			  <img class="pic" :src="item.pictureUrl" alt>
			  <!-- <i class="el-icon-delete delIcon hand" @click="handleRemove(item,index)" /> -->
			</div>
		  </div>
		</el-form-item>
		<el-form-item v-if="detail.videoPath==''" label="展示视频">
		  <div class="picList">
		    <div v-for="(item,index) in resourcesList.filter(item=>item.type == 'hou_house_resources_display_video')" class="item">
		      <video class="pic"  autoplay="autoplay" controls="controls" :src="item.pictureUrl" ></video>
		      <!-- <i class="el-icon-delete delIcon hand" @click="handleRemove(item,index)" /> -->
		    </div>
		  </div>
		</el-form-item>
		<el-form-item v-else  label="展示视频">
		  <div class="picList">
		    <div class="item">
		      <video class="pic" autoplay="autoplay" controls="controls" :src="detail.videoPath" ></video>
		      <!-- <i class="el-icon-delete delIcon hand" @click="handleRemove(item,index)" /> -->
		    </div>
		  </div>
		</el-form-item>
        <el-form-item label="全景链接">
          <el-input v-model="detail.vrPath" />
        </el-form-item>
        <el-form-item>
          <el-button @click="cancel">返回</el-button>
		  <el-button v-if="$route.query.id"  @click="ok($route.query.id)">通过</el-button>
		  <el-button v-if="$route.query.id" @click="back($route.query.id)">打回</el-button>
        </el-form-item>
      </el-form>
    </el-scrollbar>
  </section>
</template>
<script>
  import { apartmentList, propertiesList, typeListSon, sellAdd, sellUpdate, sellDetail,resourcesList,residentialList,updateStatus } from '@/api/api'
  export default {
    data() {
      return {
        tagsTypeOptions: [],
        apartmentTypeOptions: [],
        ownershipTypeOptions: [],
        houseTypeOptions: [],
        residentialIdOptions: [],
        apartmentIdOptions: [],
		residentialListOptions:[],
        newOrSecondOptions: [
          {
            value: 1,
            label: '新房'
          },
          {
            value: 2,
            label: '二手房'
          }
        ],
        renovationTypeOptions: [],
        postIdOptions: [
          {
            value: 1,
            label: 'APP端'
          },
          {
            value: 2,
            label: 'PC端'
          }],
		  resourcesList:[],
        detail: {
          'agentId': '',
          'apartmentId': '',
          'apartmentType': '',
          'area': 0,
          'buildingNum': '',
          'buildingType': '',
          'buildingYear': '',
          'commissionRate': 0,
          'corePoint': '',
          'developersId': '',
          'floor': 0,
          'hopePrice': 0,
          'houseOrientation': '',
          'houseSupporting': '',
          'houseType': '',
          'housingAgeType': '',
          'housingDescription': '',
          'housingDetails': '',
          'inArea': 0,
          'isElevator': true,
          'isVerify': true,
          'minPrice': 0,
          'newOrSecond': '',
          'onlyHouse': true,
          'openDate': '2020-02-12T01:47:09.516Z',
          'ownerMentality': '',
          'ownershipType': '',
          'propertyType': '',
          'propertyYears': 0,
          'regionId': '',
          'renovationType': '',
          'residentialId': '',
          'resourcesList': [
            {}
          ],
          'serviceIntroduction': '',
          'serviceType': '',
          'subsidiaryInformation': '',
          'tagsType': '',
          'title': '',
          'totalFoor': 0,
          'unitPrice': 0,
          'videoPath': '',
          'vrPath': ''
        }
      }
    },
    created() {
      if (this.$route.query.id) {
        sellDetail(this.$route.query.id).then(({ data }) => {
          this.detail = data
          this.detail.tagsType = this.detail.tagsType.split(',')
        });
		resourcesList(this.$route.query.id).then(({ data }) => {
		  this.resourcesList = data
		})
      }
      this.getMb()
    },
    methods: {
		ok(id){
				  updateStatus({
				    id: id,
				    status: 1
				  }).then(data => {
				    Is.tip('设置成功')
				  })
		},
		back(id){
			this.$prompt('请输入打回理由', '提示', {
			          confirmButtonText: '确定',
			          cancelButtonText: '取消'
			        }).then(({ value }) => {
						updateStatus({
						  id: id,
						  status:4,
						  noReason:value
						}).then(data => {
						  Is.tip('设置成功')
						  this.getList()
						})
			        }).catch(() => {
			               
			        });
				 
		},
      getMb() {
        // 户型列表
        apartmentList({
          curPage: 1,
          pageSize: 999,
          name: ''
        }).then(data => {
          this.apartmentIdOptions = data.data.records
        })
        // 户型类型
        typeListSon('5268de1ed6df5ea239b7e0be7e15bacd').then(({ data }) => {
          this.apartmentTypeOptions = data
        })
        // 装修类型
        typeListSon('d284274dcf28591f7e2eb0d4c96b0ba2').then(({ data }) => {
          this.renovationTypeOptions = data
        })
        // 标签
        typeListSon('ca12c7c1bdc9c80f5dab1c48b9f21b84').then(({ data }) => {
          this.tagsTypeOptions = data
        })
        // 权属
        typeListSon('b6699e320a174f88071fe5f81f93b886').then(({ data }) => {
          this.ownershipTypeOptions = data
        })
        // 房屋类型
        typeListSon('912692f9210fc09727992bc5fea18521').then(({ data }) => {
          this.houseTypeOptions = data
        })
        // 小区列表
		residentialList({
		  curPage: 1,
		  pageSize: 999,
		  name: ''
		}).then(data => {
		  this.residentialListOptions = data.data.records
		})
		
		// 楼盘列表
        propertiesList({
          curPage: 1,
          pageSize: 999,
          name: ''
        }).then(data => {
          this.residentialIdOptions = data.data.records
        })
      },
      handleRemove(index) {
        this.fileList.splice(index, 1)
      },
      // 上传图片之前的验证
      handleUpload() {
      },
      // 上传成功之后的回调
      handleSuccess(res) {
        if (res.code === 200) {
          this.fileList.push(res.data)
          this.detail.logo = this.fileList[0]
        }
      },
      // 添加/编辑
      submit() {
        // 验证不通过则不提交
        if (!this.vertify()) {
          return false
        }
        const param = JSON.parse(JSON.stringify(this.detail))
        param.tagsType = param.tagsType.join(',')
        if (this.$route.query.id) {
          // 编辑
          sellUpdate(param).then(data => {
            Is.tip('编辑成功', 2000, 'success')
            this.$router.back()
          })
        } else {
          // 新增
          sellAdd(param).then(data => {
            Is.tip('添加成功', 2000, 'success')
            this.$router.back()
          })
        }
      },
      // 返回
      cancel() {
        this.$router.back()
      },
      vertify() {
        // if (Is.empty(this.detail.title)) {
        //   Is.tip('请输入标题')
        //   return false
        // }
        return true
      }
    }}
</script>
